#calender-wrapper {
  // width: 700px;
  // box-shadow: 0 0 12px 3px rgb(255, 255, 255);
  .calender-header {
    user-select: none;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    .calender-header-tool {
      background-color: #ffffff;
      height: 32px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      & > div {
        height: inherit;
        margin: 0 10px;
        & > span {
          font-size: 20px;

          margin: 5px;

          text-align: center;
        }
        & > span[class="button"] {
          cursor: pointer;
          width: 22px;
          height: 22px;
          line-height: 18px;
        }
        & > span[class="button"]:hover {
          color: #01afaf;
          border-radius: 40% 40%;
          background-color: #ccc;
        }
      }
      & > div[class*="calender-header-year"] {
        cursor: pointer;
      }
      .calender-header-year-and-month {
        width: 200px;
      }
      .calender-header-month-switch {
        display: flex;
        justify-content: space-around;
        width: 100px;
      }
    }
    .calender-header-title {
      background-color: #ffffff;
      height: 22px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      border-top: 1px solid #aaa;
      cursor: pointer;
      transition: all 0.8s;
      .calender-header-cell {
        width: 15%;
        height: inherit;
        display: flex;
        justify-content: center;
        .calender-header-cell-title {
          color: rgb(14, 167, 167);
        }
      }
      .calender-header-cell:not(:last-child) {
        border-right: 1px solid #aaa;
      }
      .calender-header-cell:hover {
        background-color: #dff;
        box-shadow: 0 0 5px 2px rgba(0, 155, 155, 0.835);
      }
    }
    div[class~="hide"] {
      border-top: none;
      border-bottom: 1px solid #aaa;
      .calender-header-cell {
        opacity: 0;
      }
    }
  }
  #calender-content {
    cursor: pointer;
  }
}
